<template xmlns="http://www.w3.org/1999/html">
  <el-container>
    <el-header>
      <el-card class="box-card"  v-model="hospital">
        <div slot="header" class="clearfix">
          <span>{{ hospital.hospitalName }}</span>
          <el-tag >{{hospital.hospitalLevel}}{{hospital.nationalRank}}{{hospital.insurnace}}</el-tag>
        </div>
        <div>{{ hospital.hospitalIntroduction }}</div>
      </el-card>
    </el-header>

    <el-main>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card" v-model="registrationMethods">
            <div slot="header" class="clearfix">
              <span>挂号方式</span>
            </div>
            <div>
              <span>①微信公众号：{{registrationMethods.weChat}}</span></br>
              <span>②网络平台：{{registrationMethods.webPlatform}}</span></br>
              <span>③电话：{{registrationMethods.phone}}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>挂号难度</span>
            </div>
            <el-list>
              <el-list-item v-for="difficulty in registrationDifficulties" :key="difficulty">
                {{ difficulty }}
              </el-list-item>
            </el-list>
          </el-card>
        </el-col>
      </el-row>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>在线医生</span>
        </div>
        <el-table :data="onlineDoctors">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="title" label="职称"></el-table-column>
          <el-table-column prop="hospital" label="医院"></el-table-column>
          <el-table-column prop="specialties" label="专长"></el-table-column>
        </el-table>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>医院排名</span>
        </div>
        <el-table :data="hospitalRankings">
          <el-table-column prop="department" label="科室"></el-table-column>
          <el-table-column prop="rank" label="排名"></el-table-column>
        </el-table>
      </el-card>

	  <view class="register-container" @click="onRegisterClick(hospital.hospitalId)">
	      <text class="register-text">点击挂号</text>
	    </view>
    </el-main>
  </el-container>
</template>

<script>


import { Alert } from "element-ui";
import {findHospitalById, selectHospitalContactByHospitalId} from "@/api/hospital/hospital";

export default {

  data() {
    return {
      hospitalId: '',
      hospital:{},
      registrationMethods: {},
      registrationDifficulties: [
        '儿科：中等（部分医生号源较紧张）',
        '心血管内科：困难（号源较紧张）',
        '呼吸内科：困难（号源较紧张）',
        // ... 其他科室
      ],
      onlineDoctors: [
        {
          name: '李政',
          title: '骨科 副主任医师',
          hospital: '北京协和医院',
          specialties: '腰椎病、腰椎椎管狭窄症、腰椎滑脱、腰椎间盘突出、脊柱疾病、脊柱侧凸、强直性脊柱炎、脊柱后凸畸形'
        },
        {
          name: '高超',
          title: '胸外科 主治医师',
          hospital: '北京协和医院',
          specialties: '呼吸系统肿瘤、肺癌、肺恶性肿瘤、肺结节、胸腺瘤、呼吸道肿瘤'
        }
        // ... 其他医生
      ],
      hospitalRankings: [
        { department: '呼吸内科', rank: '全国第4，华北第2，北京市第2' },
        { department: '心血管内科', rank: '全国第1，华北第1，北京市第1' },
        // ... 其他科室
      ],

    };
  },
  created() {
    //查询医院详情

  },
  mounted: function () {

  },
  methods: {
	  /** 通过医院id查询医生 */
	onRegisterClick(hospitalId) {
	      uni.navigateTo({
	        url: '/pages/hospital/department?hospitalId=' + hospitalId
	      });
	    },
    /** 通过医院id查询医院详情 */
    findByHospitalId()
    {
      findHospitalById(this.hospitalId).then(response => {
        console.log("这个医院是：" + response.data)
        this.hospital = response.data;
      })
    },
    /** 通过医院id查询联系方式 */
    findHospitalContact()
    {
      selectHospitalContactByHospitalId(this.hospitalId).then(response => {
        //console.log(response)
        this.registrationMethods = response.data;
      })
    }
  },
  onLoad(option) {
    /** 获取到传来的id */
    console.log("传递过来的参数为：" + option.hospitalId)
    this.hospitalId = option.hospitalId
    this.findByHospitalId();
    this.findHospitalContact();
  },
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  background-color: #409EFF;
  border-radius: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 20px auto;
  cursor: pointer;
  transition: all 0.2s ease-in-out; /* 添加过渡效果 */
}

.register-text {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.register-container:active {
  background-color: #337ECC;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.98);
}
/* 全局字体和颜色 */
body {
  font-family: 'Arial', sans-serif;
  color: #333;

}

/* 卡片样式 */
.box-card {
  margin-bottom: 20px;
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
  overflow: hidden; /* 清除内部浮动 */
  background-color: #fff;

}

/* 卡片头部 */
.box-card >>> .el-card__header {
  padding: 12px 20px;
  background-color: #f9f9f9;
  font-size: 16px;
  font-weight: bold;

}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  margin: 10px 0;

}

/* 列表和表格样式 */
.el-list, .el-table {
  margin-top: 10px;

}

.el-list-item, .el-table-column {
  padding: 10px 20px;
  font-size: 14px;
}

/* 表格头部 */
.el-table-column {
  background-color: #f2f2f2;
}

/* 悬停效果 */
.box-card:hover, .el-table-column:hover {
  transform: translateY(-2px); /* 轻微上移 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 阴影加深 */
  cursor: pointer;
  overflow: hidden;
  margin-top: 120px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .el-row {
    flex-direction: column;
  }
  .el-col {
    width: 100%;
    margin-bottom: 20px;
  }
}

</style>
